<template>
  <div class="photo-view" :class="`view-${appStore.photoViewMode}`">
    <!-- 加载状态 -->
    <div v-if="photoStore.loading" class="loading-container">
      <el-loading :full="false" />
    </div>
    
    <!-- 空状态 -->
    <div v-else-if="photoStore.photos.length === 0" class="empty-container">
      <el-empty description="暂无照片">
        <el-button type="primary" @click="openImportDialog">导入照片</el-button>
      </el-empty>
    </div>
    
    <!-- 照片网格视图 -->
    <div v-else-if="appStore.photoViewMode === 'grid'" class="photo-grid" :style="gridStyle">
      <div 
        v-for="photo in photoStore.photos" 
        :key="photo.id"
        class="photo-item"
        @click="openPhotoDetail(photo.id)"
      >
        <div class="photo-thumbnail">
          <img 
            :src="getThumbnailUrl(photo)" 
            :alt="photo.fileName"
            loading="lazy"
          />
          <div class="photo-overlay">
            <el-icon class="view-icon"><ZoomIn /></el-icon>
          </div>
        </div>
        <div class="photo-info">
          <div class="photo-name" :title="photo.fileName">{{ photo.fileName }}</div>
          <div class="photo-date">{{ formatDate(photo.capturedAt || photo.createdAt) }}</div>
        </div>
      </div>
    </div>
    
    <!-- 照片列表视图 -->
    <div v-else-if="appStore.photoViewMode === 'list'" class="photo-list">
      <el-table :data="photoStore.photos" style="width: 100%">
        <el-table-column width="80">
          <template #default="{ row }">
            <div class="list-thumbnail">
              <img 
                :src="getThumbnailUrl(row)" 
                :alt="row.fileName"
                loading="lazy"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="文件名" min-width="200" />
        <el-table-column prop="fileSize" label="大小" width="100">
          <template #default="{ row }">
            {{ formatFileSize(row.fileSize) }}
          </template>
        </el-table-column>
        <el-table-column prop="format" label="格式" width="80" />
        <el-table-column label="拍摄时间" width="180">
          <template #default="{ row }">
            {{ formatDate(row.capturedAt || row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="cameraModel" label="相机" width="150" />
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button type="text" @click="openPhotoDetail(row.id)">查看</el-button>
            <el-button type="text" @click="openInFolder(row)">打开文件夹</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 照片瀑布流视图 -->
    <div v-else-if="appStore.photoViewMode === 'masonry'" class="photo-masonry">
      <div 
        v-for="photo in photoStore.photos" 
        :key="photo.id"
        class="masonry-item"
        :style="masonryItemStyle(photo)"
        @click="openPhotoDetail(photo.id)"
      >
        <div class="masonry-thumbnail">
          <img 
            :src="getThumbnailUrl(photo)" 
            :alt="photo.fileName"
            loading="lazy"
          />
          <div class="photo-overlay">
            <el-icon class="view-icon"><ZoomIn /></el-icon>
          </div>
        </div>
        <div class="photo-info">
          <div class="photo-name" :title="photo.fileName">{{ photo.fileName }}</div>
          <div class="photo-date">{{ formatDate(photo.capturedAt || photo.createdAt) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useAppStore } from '@/stores/app';
import { usePhotoStore } from '@/stores/photo';
import { ElLoading, ElEmpty, ElButton, ElTable, ElTableColumn, ElIcon } from 'element-plus';
import { ZoomIn } from '@element-plus/icons-vue';
import type { Photo } from '@/types';

const router = useRouter();
const appStore = useAppStore();
const photoStore = usePhotoStore();

// 计算网格样式
const gridStyle = computed(() => {
  return {
    gridTemplateColumns: `repeat(${appStore.photoGridColumns}, 1fr)`,
    gap: '16px'
  };
});

// 计算瀑布流项目样式
const masonryItemStyle = (photo: Photo) => {
  // 基于宽高比计算高度
  const aspectRatio = photo.width && photo.height ? photo.width / photo.height : 1.5;
  const baseWidth = 200; // 基础宽度
  const height = baseWidth / aspectRatio;
  
  return {
    height: `${height}px`
  };
};

// 获取缩略图URL
const getThumbnailUrl = (photo: Photo) => {
  if (photo.thumbnailPath) {
    return `file://${photo.thumbnailPath}`;
  }
  // 如果没有缩略图，返回原图
  return `file://${photo.filePath}`;
};

// 格式化日期
const formatDate = (dateString: string) => {
  if (!dateString) return '未知';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
};

// 格式化文件大小
const formatFileSize = (bytes: number) => {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 打开照片详情
const openPhotoDetail = (photoId: string) => {
  router.push(`/photo/${photoId}`);
};

// 打开导入对话框
const openImportDialog = () => {
  // TODO: 实现导入对话框
  console.log('打开导入对话框');
};

// 在文件夹中打开
const openInFolder = (photo: Photo) => {
  // TODO: 实现在文件夹中打开
  console.log('在文件夹中打开:', photo.filePath);
};
</script>

<style scoped lang="scss">
.photo-view {
  padding: 20px;
  min-height: calc(100vh - 120px);
  
  .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
  }
  
  .empty-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
  }
  
  // 网格视图样式
  &.view-grid {
    .photo-grid {
      display: grid;
      
      .photo-item {
        cursor: pointer;
        transition: transform 0.2s ease;
        
        &:hover {
          transform: translateY(-5px);
        }
        
        .photo-thumbnail {
          position: relative;
          overflow: hidden;
          border-radius: 8px;
          aspect-ratio: 1;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .photo-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.2s ease;
            
            .view-icon {
              color: white;
              font-size: 24px;
            }
          }
          
          &:hover .photo-overlay {
            opacity: 1;
          }
        }
        
        .photo-info {
          margin-top: 8px;
          
          .photo-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--el-text-color-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .photo-date {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            margin-top: 2px;
          }
        }
      }
    }
  }
  
  // 列表视图样式
  &.view-list {
    .photo-list {
      .list-thumbnail {
        width: 60px;
        height: 60px;
        overflow: hidden;
        border-radius: 4px;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }
  
  // 瀑布流视图样式
  &.view-masonry {
    .photo-masonry {
      column-count: 4;
      column-gap: 16px;
      
      .masonry-item {
        break-inside: avoid;
        margin-bottom: 16px;
        cursor: pointer;
        transition: transform 0.2s ease;
        
        &:hover {
          transform: translateY(-5px);
        }
        
        .masonry-thumbnail {
          position: relative;
          overflow: hidden;
          border-radius: 8px;
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .photo-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.2s ease;
            
            .view-icon {
              color: white;
              font-size: 24px;
            }
          }
          
          &:hover .photo-overlay {
            opacity: 1;
          }
        }
        
        .photo-info {
          margin-top: 8px;
          
          .photo-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--el-text-color-primary);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .photo-date {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            margin-top: 2px;
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .photo-view.view-masonry .photo-masonry {
    column-count: 3;
  }
}

@media (max-width: 768px) {
  .photo-view {
    padding: 10px;
    
    &.view-grid .photo-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    
    &.view-masonry .photo-masonry {
      column-count: 2;
      column-gap: 10px;
    }
  }
}

@media (max-width: 480px) {
  .photo-view {
    &.view-grid .photo-grid {
      grid-template-columns: 1fr;
    }
    
    &.view-masonry .photo-masonry {
      column-count: 1;
    }
  }
}
</style>